<?php
$this->headLink()->appendStylesheet($this->baseUrl() . '/public/styles/datepicker/jquery.datepick.css');
$this->headScript()->prependFile($this->baseUrl() . '/public/scripts/datepicker/jquery.datepick.js');
//$this->headScript()->prependFile($this->baseUrl() . '/public/scripts/reports.js');
/* [0] => Array
  (
  [id_departament] => 37
  [nro_ordenes] => 3
  [id] => 37
  [name] => Athos
  [description] => Empresa de creatividad y diseÃ±o.
  [create_date] => 2012-06-13 11:16:43
  [update_date] => 2012-06-13 20:50:09
  [deleted] => 0
  [id_user] => 1
  )

 */
?>
<script>
    google.load('visualization', '1.0', {
        'packages':['corechart','table']
    });
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var jsonData = $.ajax({
            url: "<?php echo $this->baseUrl() ?>/report/index/get-report",
            dataType:"json",
            async: false
        }).responseText;
        var dataParse = jQuery.parseJSON(jsonData);
        
        data = new google.visualization.DataTable();
        data.addColumn('string', 'Agencia');
        data.addColumn('number', 'Total de ordenes');
        
        $.each(dataParse, function(index, value) { 
            data.addRow([value.name, parseInt(value.nro_ordenes)]);
        });
        // Set chart options
        var options = {
            'title':'Total de Ordenes / Agencia',
            'width':400,
            'height':300
        };

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {showRowNumber: true});
    }
    $(document).ready(function() {    
        // report custom
        $('#formreport').ajaxForm({
            url: "<?php echo $this->baseUrl() ?>/report/index/get-report-custom",
            type: 'get',
            dataType: 'json',
            beforeSubmit: function() {
                $('#formreport').validate({
                    rules: {
                        from_date:	'required',
                        to_date:	'required'
                    }, messages: {
                        from_date:	'',
                        to_date:	''
                    }
                });
                return $('#formreport').valid();
            },
            success: function(resp) {
                google.setOnLoadCallback(drawChartCustom(resp));
                function drawChartCustom(resp){
                    data = new google.visualization.DataTable();
                    data.addColumn('string', 'Agencia');
                    data.addColumn('number', 'Total de ordenes');
                    
                    $.each(resp, function(index, value) { 

                        data.addRow([value.name, parseInt(value.nro_ordenes)]);

                        var options = {
                            'title':'Total de Ordenes / Agencia',
                            'width':400,
                            'height':300
                        };

                        // Instantiate and draw our chart, passing in some options.
                        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
                        chart.draw(data, options);
                        var table = new google.visualization.Table(document.getElementById('table_div'));
                        table.draw(data, {showRowNumber: true});
                    });
                }
            }
        });
        
    });
</script>
<style>
    label.error {
        display: none;
        padding: 0;
        margin-left: 5px;
    }
</style>
<article class="module width_full">
    <header><h3>Reportes de Ordenes</h3></header>
    <div class="module_content">
        <div style="display: none;">
            <img id="calImg" src="<?php echo $this->baseUrl() . '/public/img/calendar-blue.gif' ?>" alt="Popup" class="trigger">
        </div>
        <div>
            <form method="get" id="formreport" name="formreport">
                <table>
                    <tr>
                        <td style="width: 265px">
                            <span>Desde</span>
                            <input type="text" id="from_date" name="from_date" style="width: 200px;"/>
                        </td>
                        <td style="width: 265px">
                            <span>Hasta</span>
                            <input type="text" id="to_date" name="to_date" style="width: 200px;"/>
                        </td>
                        <td style="width: 150px">
                            <select id="departament" name="departament">
                                <option value="0">Todas Agencias</option>
                                <option value="37">Athos</option>
                                <option value="40">Velcro</option>
                                <option value="41">Raza</option>

                            </select>
                        </td>
                        <td>
                            <input type="submit" name="gen_report" id="gen_report" value="Generar Reporte"/>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <div id="chart_div" style="width:400px; height:300px;"></div>
        <div id="table_div" style="width:400px;"></div>
    </div>
</article>

<script>
    $(function() {
        $('#from_date, #to_date').datepick({
            showOnFocus: false, 
            showTrigger: '#calImg',
            dateFormat: 'dd-mm-yyyy'
        });
    });
</script>